<script setup lang="ts">
import { computed } from 'vue'
import { useRoute } from 'vue-router'
const { togleCustomerService } = useAppStore()

const route = useRoute()
enum MENU {
  MENU = '/menu',
  CASINO = '/casino',
  SPORTS = '/sports',
  CHAT = '/chat'
}

const isRouteMenu = isActiveRoute(MENU.MENU)
const isRouteCasino = isActiveRoute(MENU.CASINO)
const isRouteSports = isActiveRoute(MENU.SPORTS)

// 需要隐藏 footer 的路由白名单
const noFooterRoutes = ['/login/signin', '/login/regist', '/login/reset']
const getPurePath = (path: string) => path.replace(/^\/[a-z]{2,3}(-[A-Z]{2,3})?\//, '/')
const hideFooter = computed(() =>
  noFooterRoutes.some(path => getPurePath(route.path).startsWith(path))
)
function openBar(type: 'service') {
  if (type === 'service') {
    togleCustomerService()
  }
}

const isChat = false
</script>

<template>
  <div v-show="!hideFooter" class="tabbar z-[110] fixed bottom-0 left-0 w-full bg-bg-black-4 center rounded-t-[1rem]"
    @touchstart.stop @touchmove.stop.prevent>
    <button :class="{ active: isRouteMenu }"
      class="bar-item button flex h-full flex-1 flex-col items-center justify-center w-1/2 px-1 py-[.375rem]"
      type="button" @click="i18nNavigateTo(MENU.MENU)">
      <BaseIcon name="menu" />
      <p class="mt-1 font-extrabold text-secondary text-xs">
        {{ $t('menu') }}
      </p>
    </button>
    <button :class="{ active: isRouteCasino }"
      class="bar-item button flex h-full flex-1 flex-col items-center justify-center w-1/2 px-1 py-[.375rem]"
      type="button" @click="i18nNavigateTo(MENU.CASINO)">
      <BaseIcon name="casino" />
      <p class="mt-1 font-extrabold text-secondary text-xs">
        {{ $t('casino') }}
      </p>
    </button>
    <button id="h5-footbar-kefu"
      class="bar-item button flex h-full flex-1 flex-col items-center justify-center w-1/2 px-1 py-[.375rem]"
      type="button" @click="openBar('service')">
      <BaseIcon name="help" />
      <p class="mt-1 font-extrabold text-secondary text-xs">
        {{ $t('service') }}
      </p>
    </button>

    <button :class="{ active: isRouteSports }"
      class="bar-item button flex h-full flex-1 flex-col items-center justify-center w-1/2 px-1 py-[.375rem]"
      type="button" @click="i18nNavigateTo(MENU.SPORTS)">
      <BaseIcon name="sports" />
      <p class="mt-1 font-extrabold text-secondary text-xs">
        {{ $t('sports') }}
      </p>
    </button>
    <button :class="{ active: isChat }"
      class="bar-item button flex h-full flex-1 flex-col items-center justify-center w-1/2 px-1 py-[.375rem]"
      type="button" @click="i18nNavigateTo(MENU.CHAT)">
      <BaseIcon name="chat" />
      <p class="mt-1 font-extrabold text-secondary text-xs">
        {{ $t('chat') }}
      </p>
    </button>
  </div>
</template>

<style lang="scss" scoped>
.tab-bar {
  height: var(--footer);
  z-index: 110;
  padding-bottom: var(--safe-bottom);
}

.bar-item {
  .base-icon {
    font-size: 24px;
  }

  &.active {
    --tg-base-icon-color: var(--color-brand);

    p {
      color: var(--color-brand);
    }
  }
}
</style>
